<!-- 
  作者：LQL
  时间：2025-07-30
  描述：商家认证页面
  代码逻辑：
    1. 获取商家表中的信息，检查是否存在userId
    2. 获取用户信息成功
    3. 获取用户信息失败
    4. 获取用户信息失败，跳转到登录页面
    5. 获取用户信息成功，跳转到首页
    6. 获取用户信息成功

  -->

<template>
    <div style="max-width: 900px; margin: 20px auto; padding: 0 15px" class="merchant">
        <!-- 商家认证状态信息 -->
        <el-card style="margin-bottom: 20px">
            <div class="title">当前认证状态</div>

            <div style="padding: 10px 20px">
                <el-alert :title="statusTitle" :type="statusType" :closable="false" show-icon :description="statusText">
                    <!-- 添加状态图标 -->
                    <template #icon>
                        <el-icon name="document-checked" v-if="certificationStatus === '1'" />
                        <el-icon name="loading" v-else-if="certificationStatus === '0'" />
                        <el-icon name="document-delete" v-else-if="certificationStatus === '2'" />
                        <el-icon name="edit" v-else />
                    </template>
                </el-alert>
            </div>
        </el-card>

        <!-- 商家信息填写 -->
        <el-card style="margin-bottom: 20px" v-if="certificationStatus === null || certificationStatus === '2'">
            <div class="title">商家认证申请</div>

            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="商家名称" prop="merchantName">
                    <el-input v-model="form.merchantName" placeholder="请输入商家名称" />
                </el-form-item>

                <el-form-item label="法人姓名" prop="legalPerson">
                    <el-input v-model="form.legalPerson" placeholder="请输入法人姓名" />
                </el-form-item>

                <el-form-item label="营业执照" prop="businessLicenseImg">
                    <image-upload v-model="form.businessLicenseImg" :uploadPath="uploadUrl" :headers="uploadHeaders"
                        :onSuccess="handleUploadSuccess" :onError="handleUploadError" :accept="'.jpg,.jpeg,.png,.gif'"
                        :maxSize="2" />
                </el-form-item>

                <el-form-item label="联系电话" prop="contactPhone">
                    <el-input v-model="form.contactPhone" placeholder="请输入联系电话" />
                </el-form-item>

                <el-form-item label="备注信息" prop="remark">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer" style="text-align: center;">
                    <el-button type="primary" @click="submitForm">提 交</el-button>
                    <el-button @click="resetForm">重 置</el-button>
                </div>
            </template>
        </el-card>
    </div>
</template>

<script>
import {
    getMerchant,
    listMerchant,
    addMerchant,
    updateMerchant,
    delMerchant,
    selectMerchantByUserId,
    selectMerchantWhereUserId,
} from "@/api/ruoyi/merchant";

import { el, fa } from "element-plus/es/locales.mjs";

import { status } from "nprogress";

export default {
    name: "merchantAuth",
    data() {
        return {
            // 认证状态
            certificationStatus: null,
            form: {
                merchantId: null,
                merchantName: null,
                legalPerson: null,
                businessLicenseImg: null,
                contactPhone: null,
                certificationStatus: null,
                certificationFailReason: null,
                userId: null,
                status: null,
                delFlag: null,
                version: null,
                createTime: null,
            },
            rules: {
                merchantName: [
                    { required: true, message: "商家名称不能为空", trigger: "blur" },
                    { min: 2, max: 100, message: "长度在2到100个字符", trigger: "blur" },
                ],
                legalPerson: [
                    { required: true, message: "法人姓名不能为空", trigger: "blur" },
                    {
                        pattern: /^[\u4e00-\u9fa5]{2,20}$/,
                        message: "请输入正确的中文姓名",
                        trigger: "blur",
                    },
                ],
                contactPhone: [
                    { required: true, message: "联系电话不能为空", trigger: "blur" },
                    {
                        pattern: /^1[3-9]\d{9}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur",
                    },
                ],
                businessLicenseImg: [
                    { required: true, message: "请上传营业执照", trigger: "change" },
                ],
            },
        };
    },
    created() {
        this.getList();
    },
    methods: {
        // 在methods中添加
        // 输入框内容过滤
        sanitizeInput(value) {
            return value.replace(/[<>]/g, "");
        },
        // 输入框内容格式化
        formatPhoneNumber(value) {
            return value.replace(/\D/g, "").slice(0, 11);
        },
        // 重置表单
        resetForm() {
            this.$refs["form"].resetFields();

        }, 
        /** 提交按钮 */
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    addMerchant(this.form).then(response => { 
                        this.$modal.msgSuccess("新增成功, 请等待审核");
                        this.getList();

                    });
                }
            });
        },

        /** 查询业务订单信息列表 */
        // 修改状态获取逻辑，确保响应式更新
        async getList() {
            try {
                selectMerchantWhereUserId().then(res => {
                    if (res.data == false) {
                        this.certificationStatus = null;
                        console.log(this.certificationStatus)
                    } else {
                        selectMerchantByUserId().then(res => {
                            this.certificationStatus = res.data.certificationStatus;
                            console.log(this.certificationStatus)
                        })

                    }
                })


            } catch (error) {
                console.error("获取认证信息失败:", error);
                this.certificationStatus = "0";
            }
        },
    },
    computed: {
        statusTitle() {
            switch (this.certificationStatus) {
                case "0":
                    return "认证审核中";
                case "1":
                    return "认证已通过";
                case "2":
                    return "认证未通过";
                default:
                    return "未提交认证信息";
            }
        },
        statusType() {
            switch (this.certificationStatus) {
                case "0":
                    return "warning";
                case "1":
                    return "success";
                case "2":
                    return "danger";
                default:
                    return "info";
            }
        },
        statusText() {
            switch (this.certificationStatus) {
                case "0":
                    return "您的商家认证已提交，请耐心等待审核";
                case "1":
                    return "恭喜！您的商家认证已通过";
                case "2":
                    return "您的商家认证未通过，请重新提交认证信息";
                default:
                    return "您未提交商家认证信息，请填写商家认证信息";
            }
        },
    },
};

</script>

<style scoped>
.title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.merchant-card {
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.merchant-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

.form-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}
</style>